<template>
  <div class="bank-select">
    <div class="edit">
      <el-button @click="changeEditWay">{{!editWay ? '填写' : '取消'}}</el-button>
    </div>
    <div class="select">
      <el-select v-show="!editWay" v-model="value" :placeholder="$t('common.placeholderSelect')">
        <el-option
          v-for="item in banks"
          :key="item.value"
          :label="item.bankName"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input v-show="editWay" v-model="value"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banks: [],
      value: '',
      editWay: false
    }
  },
  watch: {
    value(v) {
      this.$emit('input', v)
    }
  },
  methods: {
    changeEditWay() {
      this.editWay = !this.editWay
      this.value = ''
    },
    loadAll() {
      return [
        { value: 'WXPAY', bankName: '微信支付' },
        { value: 'ALIPAY', bankName: '支付宝' },
        { value: 'ABC', bankName: '农业银行' },
        { value: 'ICBC', bankName: '工商银行' },
        { value: 'CCB', bankName: '建设银行' },
        { value: 'BOC', bankName: '中国银行' },
        { value: 'CIB', bankName: '兴业银行' },
        { value: 'BCM', bankName: '交通银行' },
        { value: 'CMB', bankName: '招商银行' },
        { value: 'CZCB', bankName: '稠州银行' },
        { value: 'YWRCB', bankName: '义乌农商银行' },
        { value: 'UNIONPAYB2B', bankName: '银联B2B' },
        { value: 'UNIONPAYB2C', bankName: '银联B2C' },
        { value: 'CITICBANK', bankName: '中信银行' },
        { value: 'other', bankName: '其他' }
      ]
    }, 
  },
  mounted() {
    this.banks = this.loadAll()
  }
}
</script>
<style lang="scss" scoped>
.bank-select {
  position: relative;
  .select {
    padding-right: 70px
  }
  .edit {
    float: right;
  }
}
</style>